<template>
    
    <div class="box" >
        <div class="right-box">
            <div class="title">
                <h3 class="title-left " 
                    @click="changeLoginWay(1)"
                    :class="{active: currLoginWay == 1 }"
                >账号密码登录</h3>
                <h3 class="title-left" @click="changeLoginWay(2)"
                    :class="{active: currLoginWay == 2 }"
                >验证码码登录</h3>
                <div class="title-right">
                    <span>没有账号?</span>
                    <a href="register">前往注册</a>
                </div>
            </div>
            <!-- 账号登录 -->
            <div class="accout_login" v-if="currLoginWay == 1">
                <div class="hezi1">
                    <p class="p1">账号</p>
                    <input class="username" type="text" @focus="focusInput"  @blur="checkLoginData(user, hintRefs)" v-model="user.account" placeholder="请输入11位手机号">
                    <i ref="accountHint"></i>
                </div>
                <div class="hezi2">
                    <p class="p1">密码</p>
                    <input class="Pwd" type="password" @focus="focusInput" @blur="checkLoginData(user, hintRefs)" v-model="user.password" placeholder="请输入密码"
                        id="Pwd">
                    <i ref="passwordHint"></i>
                </div>
    
                <div class="hezi3">
                    <p class="p1">验证码</p>
                    <div class="inputcode">
                        <input id="code"  @focus="focusInput" @blur="checkLoginData(user, hintRefs)" v-model="user.checkCode" placeholder="请输入图片验证码"
                       >
                        <img class='verificationCode'  :src="condeImgSrc" alt=""  @click="brushImgCode"/>
                    </div>
                    <i ref="codeHint"></i>
                </div>
            </div>

                <!-- 手机号登录 -->
            <div class="phone-login" v-if="currLoginWay == 2"  >
                <div class="hezi1">
                    <p class="p1">手机号</p>
                    <input class="username" type="text" @focus="focusInput"  @blur="clickUser" v-model="user.account" placeholder="请输入11位手机号">
                </div>
                <div class="hezi2">
                    <p class="p1">验证码</p>
                    <input class="Pwd" type="password" @focus="focusInput" @blur="clickPassword" v-model="user.password" placeholder="请输入密码"
                        id="Pwd">
                </div>
            </div>
                <div class="auto">
                    <span><input type="checkbox">记住密码</span>
                    <span><a href="#">忘记密码?</a></span>
                </div>
            <button id="btn1" @click="login(user,hintRefs)">登录</button>
        </div>
    </div>
</template>

<script setup >
import { reactive, ref, onMounted, computed } from "vue";
import  {useCheckLoginData} from "./login.js"
const currLoginWay = ref(1)  //1对应账号密码登录   2 对应手机号加验证码
const user = {
    account: 15756233825,
    password: "wn57423825",
    checkCode:""
};
const hintRefs = ref([])
const codeHint = ref()
const accountHint = ref()
const passwordHint = ref()
const [isPass, checkLoginData, login] = useCheckLoginData()
const condeImgSrc= ref("http://47.120.14.63:8081/checkCode/getCheckCode")
const brushImgCode = () => {
    condeImgSrc.value = 'http://47.120.14.63:8081/checkCode/getCheckCode/?id=' + Math.random()
}
const changeLoginWay = (value) => {
    currLoginWay.value = value
}
onMounted(() => {
    hintRefs.value.push(accountHint)
    hintRefs.value.push(passwordHint)
    hintRefs.value.push(codeHint)
}
)
</script>

<style scoped lang=scss>
.wei{
    position: absolute;
}
.box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100vh;
    background: url("../../assets/imgs/编组3.png") no-repeat;
    background-size: cover;
    .right-box {
        margin-right: 1.25rem;
        .hidden {
            color: red;
        }
        .title {
            width: 4.95rem;
            height: 0.67rem;
            margin-bottom: 0.3rem;
            display: flex;
            .title-left {
                display: flex;
                align-items: center;
                margin-right: 0.1875rem;
                color: black;
                font-weight: 600;
                h3 {
                    font-size: 0.3rem;
                    font-weight: 400;
                }
                &:hover {
                    cursor: pointer;
                }
                &.active {
                    border-bottom: 0.035rem solid #139DFF;
                }

            }
            .title-right {
                display: flex;
                align-items: center;
                line-height: 1.27rem;
                font-size: 0.2rem;
                span {
                    color: #4D4D4D;
                }
                a {
                    color: #139DFF;
                }
            }
        }
        .hezi1,
        .hezi2 ,.hezi3{
            height: 0.84rem;
            margin-bottom: 0.85rem;
            .p1 {
                margin-bottom: 0.13rem;
                color: #999999;
                font-size: 0.3rem;
            }
            i {
                color: red;
            }
            input {
                width: 5rem;
                height: 0.77rem;
                outline: none;
                color: #999999;
                box-sizing: border-box;
                background-color: white;
                border: 0.01rem solid #d8d8d8;
                padding-left: 0.17rem;
                border-radius: 0.06rem;
            }
            input:nth-child(3){
                width: 0.625rem;
            }
            .hidden {
                font-size: 0.17rem;
                color: red;
            }
        }
        #btn1 {
            width: 5rem;
            font-size: 0.3rem;
            color: white;
            height: 0.77rem;
            margin-bottom: 0.31rem;
            outline: none;
            background-color: #139DFF;
            border-radius: 0.06rem;
            border: 0.01rem solid #d3d3d3;
        }
        .auto {
            font-size: 0.17rem;
            padding-bottom: 0.15rem;
            margin-bottom: 0.23rem;
            display: flex;
            justify-content: space-between;
            span {
                color: #999999;
                font-size: 0.3rem;
                input {
                    width: 0.23rem;
                    height: 0.23rem;
                    margin-right: 0.1rem;
                }
            }
            a {
                text-decoration: none;
                color: #999999;
            }
        }
    }

}
.hezi3 {
    width: 3rem;
    .inputcode {
        display: flex;
        width: 3rem;
        #code {
            width: 2rem;
            margin-right: .5rem;
        }
        .verificationCode {
            height: 0.77rem ;
            border-radius: .1rem;
        }
    }
}
</style>